<template>
<div class="customer-manager-item">

    <div  @click="goDetail(subItem)" :class="['customer-list-item','display-flex',list.length>0&&subIndex!=list.length-1?'vux-1px-b':'']" v-for="(subItem,subIndex) in list">
      <img  class="customer-head" :src="getHeader(subItem)" alt="">
      <div class="flex-1">
        <div class="display-flex store-info">
          <span class="store-name flex-1">{{subItem.name?subItem.name:'暂未添加店铺名称'}}</span>
          <span class="pay-type">{{subItem.payWay}}</span>
        </div>
        <div class="display-flex justify-content-flex-justify">
          <div class="display-flex">
            <span class="customer-name">{{subItem.contactNameForSeller}}</span>
            <span class="customer-phone">{{subItem.phone}}</span>
          </div>
          <div class="btn-move" @click.stop="showDialog(subItem)">
            移至...
          </div>
        </div>
      </div>
    </div>

  <div v-transfer-dom >
    <x-dialog v-model="dialog" :hide-on-blur="true">
      <div  class="category-dialog">
        <scroller>
          <div class="content">
            <checklist  :max="1" :options="checkListArray" v-model="checkValue" @on-change="checkChange"></checklist>
          </div>
        </scroller>
      </div>


      <div class="btn-comfirm-container">
        <span class="btn-comfirm display-flex align-items-center" @click="closeDialog"><span>确定</span></span>
      </div>
    </x-dialog>

  </div>
</div>
</template>
<script type="text/ecmascript-6">
    export default{
       props:{
          list:{
              default:[],
              type:Array
          },
         checkListArray:{
           default:[],
           type:Array
         }
       },
      data(){
        return {
          checkValue:[],
          dialog:false,
          currentItem:null
        }
      },
      methods:{
        getHeader(item){
          if(item.logo){
            return item.logo
          }else{
            return require('../assets/img/customer/customer_head.png');
          }
        },
        showDialog(item){
          console.log("===item",item)
          this.currentItem=item;
          this.dialog=true;
          this.checkValue=[item.categoryId];
         // this.ModalHelper.afterOpen()
        },
        closeDialog(){
        //  this.ModalHelper.beforeClose();
          this.dialog=false;
          if(this.checkValue.length>0){
            this.$ajax.post("customer/category/transfer",{customerId:this.currentItem.customerId,toCategoryId:this.checkValue[0]},(res)=>{
              if(res.code==200){
                this.$vux.toast.text('操作成功', 'center');
                this.$emit("dialogComfrim",{});
                if(this.$fromApp(this)){
                  this.$callJava({code:1017,noBack:true})
                }
              }else{
                this.$vux.toast.text(res.msg, 'center');
              }
            })
          }
        },
        checkChange(){

        },
        goDetail(item){
          if(this.$fromApp(this)){
            this.$callJava({url:this.$webUrl+"customer/detail?from=app&id="+item.customerId+"&Authorization="+this.$storage.get("token"),title:"客户详情"})
          }else{
            this.$router.push({ path:'/customer/detail',query:{id:item.customerId}})
          }
        },
      },
      watch: {
        list: function (newVal, oldVal) {
          this.list = newVal;
        },
        checkListArray:function (newVal, oldVal) {
          this.checkListArray = newVal;
        }
      }
    }
</script>

<style lang="less" type="text/less" scoped>
  .customer-manager-item{
    .customer-list-item{
      padding:  .24rem 0;
      .customer-head{
        width: 0.92rem;
        height: 0.92rem;
        margin-right: 0.18rem;
        border-radius: 0.92rem;
      }
      .store-info{
        margin-bottom: .2rem;
      }
      .store-name{
        color: #333;
        font-size: .28rem;
        font-weight: 500;
      }
      .pay-type{
        color: #FDB376;
        font-size: .26rem;
      }
      .customer-name,.customer-phone{
        font-size: .26rem;
        margin-right: .3rem;
        color: #999;
      }
      .btn-move{
        padding: 0.02rem  0.25rem;
        font-size: .28rem;
        color: #fff;
        background:#8E919F;
        border-radius:0.06rem;
      }
    }
  }
  /deep/ .weui-dialog{
    border-radius: 0.1rem;
  }
  .category-dialog{
    position: relative;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    height: 3.72rem;
    overflow: scroll;
    padding-left: 0.4rem;
    padding-top: 0.5rem;
    .content{
      padding-bottom: .5rem;
    }
    /deep/ .weui-cell__bd p{
      text-align: left;
      padding-left: 0.4rem;
      font-size: 0.34rem;
      color: #333;
    }
    /deep/ .weui-cells_checkbox .weui-check:checked + .vux-checklist-icon-checked:before{
      color: #FF3B47;
    }
    /deep/ .weui-cells:before,/deep/ .weui-cell:before,/deep/ .weui-cells:after{
      border: none;
    }
  }
  .btn-comfirm-container{
    text-align: right;
    margin-right: .6rem;
  }
  .btn-comfirm{
    display: inline-block;
    margin: .2rem 0rem;
    height:.6rem;
    padding: 0.1rem .9rem;
    background:#527DD9;
    border-radius:.6rem;
    color: #fff;
    font-size: .34rem;
  }
</style>
